<script setup lang="tsx">
import { computed, useAttrs } from 'vue'
import { MdCatalog } from 'md-editor-v3'
import { useDesign } from '@sat/shared-hooks'
import { mdHeadingId } from '../../config'

const props = withDefaults(
  defineProps<{
    editorId: string
    isEllipsis: boolean
  }>(),
  {
    isEllipsis: true,
  },
)
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('md-catalog')
const getBindValue = computed(() => {
  const delArr: string[] = ['isEllipsis']
  const attrs = useAttrs()
  const obj = { ...attrs, ...props }
  for (const key in obj) {
    if (delArr.includes(key))
      delete obj[key as keyof typeof obj]
  }
  return obj
})
</script>

<template>
  <MdCatalog
    :class="[prefixCls, isEllipsis ? '' : 'text-no-ellipsis']"
    v-bind="getBindValue"
    :md-heading-id="mdHeadingId"
  />
</template>

<style lang="less">
.md-editor-catalog.@{namespace}-md-catalog {
  .md-editor-catalog-link {
    line-height: 18px;
  }

  .md-editor-catalog-link span {
    color: inherit;
  }

  .md-editor-catalog-link span:hover {
    color: var(--el-color-primary);
  }

  .md-editor-catalog-active > span {
    color: var(--el-color-primary);
  }
}

.md-editor-catalog.@{namespace}-md-catalog.text-no-ellipsis {
  .md-editor-catalog-link span {
    overflow: unset;
    white-space: unset;
    text-overflow: unset;
  }
}
</style>
